Form Upload

Upload Files

PDF, DOC, PPT, JPG, PNG

filename.ext

456 KB

<div class="form-upload">
<div class="upload-item upload-zone">
    <div class="upload-icon">
        <img src="./assets/icons/cloud-arrow-up.svg" class="svg-inject svg-icon" alt="" />
    </div>
    <div class="file-info">
        <div class="file-info-title">Upload Files</div>
        <div class="file-indo-detail">PDF, DOC, PPT, JPG, PNG</div>
    </div>
</div>
<div class="upload-item">
    <div class="upload-icon">
        <img src="./assets/icons/file.svg" class="svg-inject svg-icon" alt="" />
    </div>
    <div class="file-info">
        <div class="file-info-title">filename.ext</div>
        <div class="file-info-detail">456 KB</div>
    </div>
    <button class="action-delete">
        <img src="./assets/icons/x.svg" class="svg-inject svg-icon" alt="" />
    </button>
</div>
</div>

Variables

You can found SASS Variable on scss/vendors/bootstrap/forms/_form-upload.scss

$form-upload-gap: 20px;

$form-upload-item-background: $white;
$form-upload-item-padding-y: 14px;
$form-upload-item-padding-x: 14px;
$form-upload-item-width: 250px;
$form-upload-item-width-xxl: 350px;
$form-upload-item-border-width: 1px;
$form-upload-item-border-color: $primary;
$form-upload-item-border-radius: 14px;

$form-upload-item-icon-background: #F6EEFF;
$form-upload-item-icon-color: $primary;
$form-upload-item-icon-padding-y: 18px;
$form-upload-item-icon-padding-x: 18px;
$form-upload-item-icon-size: 22px;
$form-upload-item-icon-gap: 14px;
$form-upload-item-icon-border-radius: 17px;

$form-upload-item-info-gap: 5px;

$form-upload-item-file-title-font-size: $font-size-base;
$form-upload-item-file-title-font-weight: $font-weight-semiBold;
$form-upload-item-file-title-color: $dark;

$form-upload-item-file-detail-font-size: 14px;
$form-upload-item-file-detail-font-weight: $font-weight-semiBold;
$form-upload-item-file-detail-color: $primary;

$form-upload-btn-delete-background: #FF4A55;
$form-upload-btn-delete-padding: 6px;
$form-upload-btn-delete-border-radius: 50rem;

$form-upload-btn-delete-icon-color: $white;
$form-upload-btn-delete-icon-size: 12px;

// # Upload Zone Item
$form-upload-item-upload-zone-background: #F5F5F5;
$form-upload-item-upload-zone-border-width: 2px;
$form-upload-item-upload-zone-border-type: dashed;
$form-upload-item-upload-zone-border-color: #C2C2C2;

$form-upload-item-upload-zone-icon-background: $primary;
$form-upload-item-upload-zone-icon-color: $white;